<template>
  <div class="a0">
    <div class="rightTitle">
      <div class="b1" v-for="item in menus" @click="toPage(item.page)">{{ item.name }}</div>
    </div>
    <div class="a1">
      <div id="publicityId" style="width: 400px; height: 200px;"></div>
      <div id="publicityId1" style="width: 400px; height: 200px;">
        <div id="questionId" class="main_top_left_top_con"></div>
      </div>
      <div id="publicityId1" style="width: 400px; height: 200px;">
        <div id="departmentId" class="main_top_left_top_con"></div>
      </div>
      <div id="publicityId1" style="width: 400px; height: 200px;">
        <div id="baseId" class="main_top_left_top_con"></div>
      </div>
    </div>

    <div class="a1">
      <div id="publicityId1" style="width: 400px; height: 200px;">
        <div id="coverageId" class="main_top_left_top_con"></div>
      </div>
      <div id="publicityId1" style="width: 400px; height: 200px;">
        <div id="contentId" class="main_top_left_top_con"></div>
      </div>
      <div id="publicityId1" style="width: 400px; height: 200px;">
        <div id="publicNumId" class="main_top_left_top_con"></div>
      </div>
      <div id="publicityId1" style="width: 400px; height: 200px;">
        <div id="yearsNumId" class="main_top_left_top_con"></div>
      </div>

    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import $ from 'jquery'

export default {
  name: 'echartsDemo',
  data() {
    return {
      chart: null,
      menus: [
        { name: '学生管理', page: '/stu' },
        { name: '数据大屏', page: '/data1' },
        { name: '新增学生', page: '/student' },
        { name: '上传文件', page: '/upload' },
        { name: '视频演示', page: '/video' },
        { name: '我的页面', page: '/my' },
        { name: '退出登陆', page: '/' },
      ],
    }
  },
  methods: {
    toPage(page) {
      if (page == '/') {
        localStorage.removeItem('token'); // 删除缓存
      }
      console.log('topage', page);
      this.$router.push(page);
      // this.$router.replace(page);
    },
    test1() {
      var dataArr = [
        { name: '测试11', value: 300 },
        { name: '测试22', value: 500 },
        { name: '测试33', value: 400 },
        { name: '测试44', value: 350 },
        { name: '测试55', value: 363 },
        { name: '测试66', value: 800 }
      ]

      var publicitChart = echarts.init(document.getElementById('publicityId'))
      var data = dataArr
      var option = {
        color: ['#38EB70', '#F7E16C', '#0EFCFF', '#FD9133', '#4D92F2'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          itemWidth: 16, // 标志图形的长度
          itemHeight: 16, // 标志图形的宽度
          orient: 'vertical',
          left: 'right',
          top: '5%',
          bottom: '50%',
          x: '45%',
          textStyle: {
            color: '#fff',
            fontSize: 12
          },
          data: data
        },
        series: [
          // 主要展示层的
          {
            radius: ['70%', '90%'],
            center: ['25%', '50%'],
            type: 'pie',
            label: {
              normal: {
                position: 'inner',
                show: false
              }
            },
            name: 'XX公开数量',
            data: data
          },
          // 边框的设置
          {
            radius: ['50%', '55%'],
            center: ['25%', '50%'],
            type: 'pie',
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            animation: false,
            tooltip: {
              show: false
            },
            data: [
              {
                value: 1,
                itemStyle: {
                  color: 'rgba(250,250,250,0.3)'
                }
              }
            ]
          }
        ]
      }
      publicitChart.setOption(option)
      setInterval(function () {
        publicitChart.clear()
        publicitChart.setOption(option)
      }, 2000)
    },
    test2() {
      var numArr = [
        { name: '测试11', value: 300 },
        { name: '测试22', value: 700 },
        { name: '测试33', value: 400 },
        { name: '测试44', value: 350 },
        { name: '测试55', value: 363 },
        { name: '测试66', value: 800 }
      ]
      // for(var i = 0; i < data.list.length; i++) {
      //     numArr.push({name: data.list[i].name,value: data.list[i].num})
      // }
      var datas = numArr
      var questionChart = echarts.init(document.getElementById('questionId'))
      var option = {
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: ['#2E8CFF', '#FD9133', '#37D2D4', '#19CA88', '#858FF8'],
        legend: {
          itemWidth: 11, // 标志图形的长度
          itemHeight: 11, // 标志图形的宽度
          orient: 'vertical',
          // left: 'right',
          top: '15%',
          x: '50%',
          data: datas,
          textStyle: {
            //图例文字的样式
            color: '#fff',
            fontSize: 8
          }
        },
        series: [
          {
            name: '问题反馈',
            type: 'pie',
            radius: '75%',
            center: ['20%', '50%'],
            animationDuration: 2500,
            data: datas,
            label: {
              normal: {
                position: 'inner',
                show: false
              }
            }
          }
        ]
      }
      questionChart.setOption(option)
      setInterval(function () {
        questionChart.clear()
        questionChart.setOption(option)
      }, 8000)
    },
    test3: function () {
      var dataArr = [
        { name: '测试11', value: 300 },
        { name: '测试22', value: 510 },
        { name: '测试33', value: 400 },
        { name: '测试44', value: 350 },
        { name: '测试55', value: 363 }
      ]
      // 中间滚动数据展示
      for (var j = 0; j < dataArr.length; j++) {
        $('.main_list_title_num' + (j + 1))
          .addClass('counter-value')
          .text(dataArr[j].value)
        $('.main_list_title' + (j + 1)).text(dataArr[j].name)
      }
      var departmentChart = echarts.init(
        document.getElementById('departmentId')
      )
      var data = dataArr
      var option = {
        color: ['#FD9133', '#47F6A2', '#37D2D4', '#3493FF'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          itemWidth: 15, // 标志图形的长度
          itemHeight: 15, // 标志图形的宽度
          orient: 'vertical',
          // left: 'right',
          top: '30%',
          bottom: '50%',
          x: '5%',
          textStyle: {
            color: '#fff',
            fontSize: 8
          },
          data: data
        },
        series: [
          {
            name: 'XXXX公开占比',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['78%', '52%'],
            labelLine: {
              normal: {
                length: 12,
                lineStyle: {
                  type: 'solid',
                  color: '#0EFCFF'
                }
              }
            },
            label: {
              normal: {
                formatter: (params) => {
                  return params.name
                },
                borderWidth: 0,
                borderRadius: 4,
                padding: [0, 0],
                height: 20,
                fontSize: 8,
                align: 'center',
                color: '#0EFCFF'
              }
            },
            data: data
          },
          {
            color: '#0EFCFF',
            type: 'pie',
            radius: ['55', '56'],
            center: ['78%', '52%'],
            data: [100],
            label: {
              show: false
            }
          },
          {
            type: 'pie',
            radius: ['25', '26'],
            center: ['78%', '52%'],
            data: [100],
            label: {
              show: false
            }
          }
        ]
      }
      departmentChart.setOption(option)
      setInterval(function () {
        departmentChart.clear()
        departmentChart.setOption(option)
      }, 12000)
    },
    test4: function () {
      var baseChart = echarts.init(document.getElementById('baseId'))
      var charts = [
        { name: '测试1', num: 200 },
        { name: '测试2', num: 300 },
        { name: '测试3', num: 400 },
        { name: '测试4', num: 600 },
        { name: '测试5', num: 300 }
      ]
      var color = [
        'rgba(100,255,249',
        'rgba(100,255,249',
        'rgba(100,255,249',
        'rgba(100,255,249',
        'rgba(100,255,249'
      ]

      let lineY = []
      for (var i = 0; i < charts.length; i++) {
        var x = i
        if (x > color.length - 1) {
          x = color.length - 1
        }
        var data = {
          name: charts[i].name,
          color: color[x] + ')',
          value: charts[i].num,
          itemStyle: {
            normal: {
              show: true,
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                [
                  {
                    offset: 0,
                    color: color[x] + ', 0.3)'
                  },
                  {
                    offset: 1,
                    color: color[x] + ', 1)'
                  }
                ],
                false
              ),
              barBorderRadius: 10
            },
            emphasis: {
              shadowBlur: 15,
              shadowColor: 'rgba(0, 0, 0, 0.1)'
            }
          }
        }
        lineY.push(data)
      }
      var option = {
        title: {
          show: false
        },
        grid: {
          // borderWidth: 1,
          top: '10%',
          left: '30%',
          right: '20%',
          bottom: '3%'
        },
        color: color,
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: false,
              inside: false
            },
            data: charts.name
          },
          {
            type: 'category',
            inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              inside: false,
              textStyle: {
                color: '#38E1E1',
                fontSize: '8'
              },
              formatter: function (val, index) {
                return `${charts[index].num}`
              }
            },
            splitArea: {
              show: false
            },
            splitLine: {
              show: false
            },
            data: charts
          }
        ],
        xAxis: {
          // type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        series: [
          {
            name: '',
            type: 'bar',
            zlevel: 2,
            barWidth: '5px',
            data: lineY,
            animationDuration: 1500,
            label: {
              normal: {
                color: 'white',
                show: true,
                position: [-65, -2],
                textStyle: {
                  fontSize: 8
                },
                formatter: function (a, b) {
                  return a.name
                }
              }
            }
          }
        ],
        animationEasing: 'cubicOut'
      }
      baseChart.setOption(option)
      setInterval(function () {
        baseChart.clear()
        baseChart.setOption(option)
      }, 40000)
    },
    test5: function () {
      var resArr = [
        { name: '测试11', value: 300 },
        { name: '测试22', value: 520 },
        { name: '测试33', value: 400 },
        { name: '测试44', value: 350 },
        { name: '测试55', value: 363 },
        { name: '测试66', value: 800 }
      ]
      var indicatorArr = []
      var numArr = []
      for (var i = 0; i < resArr.length; i++) {
        indicatorArr.push({ name: resArr[i].name, max: 900 })
        numArr.push(resArr[i].value)
      }
      var data = [
        {
          value: numArr
        }
      ]
      var coverageChart = echarts.init(document.getElementById('coverageId'))
      var option = {
        legend: {
          show: true,
          icon: 'circle',
          bottom: 30,
          center: 0,
          itemWidth: 14,
          itemHeight: 14,
          itemGap: 21,
          orient: 'horizontal',
          data: ['a', 'b'],
          textStyle: {
            fontSize: '70%',
            color: '#0EFCFF'
          }
        },

        radar: {
          // shape: 'circle',
          radius: '70%',
          triggerEvent: true,
          // type: 'default',
          name: {
            textStyle: {
              color: '#39DCF4',
              fontSize: '10',
              // borderRadius: 3,
              padding: [10, 10]
            }
          },
          nameGap: '2',
          indicator: indicatorArr,
          splitArea: {
            areaStyle: {
              color: 'rgba(255,255,255,0)'
            }
          },
          axisLine: {
            //指向外圈文本的分隔线样式
            lineStyle: {
              color: 'rgba(255,255,255,.2)'
            }
          },
          splitLine: {
            lineStyle: {
              width: 1,
              color: 'rgba(255,255,255,.2)'
            }
          }
        },
        series: [
          {
            name: 'XXX区域占比',
            type: 'radar',
            animationDuration: 2000,
            areaStyle: {
              normal: {
                color: {
                  type: 'linear',
                  opacity: 1,
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  color: '#2EEFAD'
                }
              }
            },
            symbolSize: 0,
            lineStyle: {
              normal: {
                // color: 'rgba(252,211,3, 1)',
                width: 0
              }
            },
            data: data
          }
        ]
      }
      coverageChart.setOption(option)
      setInterval(function () {
        coverageChart.clear()
        coverageChart.setOption(option)
      }, 10000)
    },
    test6: function () {
      var resArr = [
        { name: '测试11', value: 30 },
        { name: '测试22', value: 50 },
        { name: '测试55', value: 33 },
        { name: '测试66', value: 80 }
      ]
      var nameArr = []
      var caiArr = []
      var cunArr = []
      var danArr = []
      var junArr = []
      var zhenArr = []
      for (var i = 0; i < resArr.length; i++) {
        nameArr.push(resArr[i].name)
        caiArr.push(resArr[i].value)
        cunArr.push(resArr[i].value)
        danArr.push(resArr[i].value)
        junArr.push(resArr[i].value)
        zhenArr.push(resArr[i].value)
      }

      var contentChart = echarts.init(document.getElementById('contentId'))
      var option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          x: '35%',
          y: '0%',
          data: ['财务', '村务', '党务', '居务', '政务'],
          textStyle: {
            color: '#fff',
            fontSize: 8
          },
          itemWidth: 10,
          itemHeight: 10
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: nameArr,
            axisLabel: {
              interval: 0,
              textStyle: {
                fontSize: 8,
                color: 'rgba(255,255,255,.7)'
              }
            },
            axisTick: {
              //y轴刻度线
              show: false
            },
            axisLine: {
              //y轴
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            name: '单位：%',
            nameTextStyle: {
              color: 'rgba(255,255,255,.7)',
              fontSize: 8
            },
            max: 100,
            min: 0,
            boundaryGap: [0.2, 0.2],
            axisTick: {
              //y轴刻度线
              show: false
            },
            axisLine: {
              //y轴
              show: false
            },
            axisLabel: {
              textStyle: {
                color: 'rgba(255,255,255,.8)',
                fontSize: 8
                // opacity: 0.1,
              }
            },
            splitLine: {
              //决定是否显示坐标中网格
              show: true,
              lineStyle: {
                color: ['#fff'],
                opacity: 0.2
              }
            }
          },
          {
            type: 'value',
            scale: true,
            show: false,
            // name: "销量额(万元)",
            nameTextStyle: {
              color: 'rgba(255,255,255,.2)'
            },
            max: 1,
            min: 0,
            boundaryGap: [0.2, 0.2],
            axisTick: {
              //y轴刻度线
              show: false
            },
            axisLine: {
              //y轴
              show: false
            },
            axisLabel: {
              textStyle: {
                color: 'rgba(255,255,255,.2)'
                // opacity: 0.1,
              }
            },
            splitLine: {
              //决定是否显示坐标中网格
              show: true,
              lineStyle: {
                color: ['#fff'],
                opacity: 0.2
              }
            }
          }
        ],
        color: ['#0EFCFF', '#FD9133'],
        grid: {
          left: '5%',
          right: '1%',
          top: '25%',
          bottom: '15%'
          // containLabel: true
        },
        series: [
          {
            barWidth: '10%',
            name: '财务',
            type: 'bar',
            data: caiArr
          },
          {
            animationDuration: 2500,
            barWidth: '20%',
            name: '村务',
            type: 'bar',
            data: cunArr
          },
          {
            animationDuration: 2500,
            barWidth: '20%',
            name: '党务',
            type: 'bar',
            data: danArr
          },
          {
            animationDuration: 2500,
            barWidth: '20%',
            name: '居务',
            type: 'bar',
            data: junArr
          },
          {
            animationDuration: 2500,
            barWidth: '20%',
            name: '政务',
            type: 'bar',
            data: zhenArr
          }
        ]
      }
      contentChart.setOption(option)
      setInterval(function () {
        contentChart.clear()
        contentChart.setOption(option)
      }, 90000)
    },
    test7: function () {
      var resArr = [
        { name: '测试11', value: 300 },
        { name: '测试22', value: 530 },
        { name: '测试33', value: 400 },
        { name: '测试44', value: 350 },
        { name: '测试55', value: 363 },
        { name: '测试66', value: 800 }
      ]
      var xunArr = []
      var jingArr = []
      var dateArr = []
      for (var i = 0; i < resArr.length; i++) {
        xunArr.push(resArr[i].value)
        jingArr.push(resArr[i].value)
        dateArr.push(resArr[i].name)
      }
      var publicNumChart = echarts.init(
        document.getElementById('publicNumId')
      )
      var option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          x: '35%',
          y: '0%',
          data: ['巡察', '警示'],
          textStyle: {
            color: '#fff',
            fontSize: 8
          },
          itemWidth: 10,
          itemHeight: 10
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: dateArr,
            axisLabel: {
              interval: 0,
              textStyle: {
                fontSize: 8,
                color: 'rgba(255,255,255,.7)'
              }
            },
            axisTick: {
              //y轴刻度线
              show: false
            },
            axisLine: {
              //y轴
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            name: '单位：%',
            nameTextStyle: {
              color: 'rgba(255,255,255,.7)',
              fontSize: 8
            },
            max: 1000,
            min: 0,
            boundaryGap: [0.2, 0.2],
            axisTick: {
              //y轴刻度线
              show: false
            },
            axisLine: {
              //y轴
              show: false
            },
            axisLabel: {
              textStyle: {
                color: 'rgba(255,255,255,.8)',
                fontSize: 8
                // opacity: 0.1,
              }
            },
            splitLine: {
              //决定是否显示坐标中网格
              show: true,
              lineStyle: {
                color: ['#fff'],
                opacity: 0.2
              }
            }
          },
          {
            type: 'value',
            scale: true,
            show: false,
            // name: "销量额(万元)",
            nameTextStyle: {
              color: 'rgba(255,255,255,.2)'
            },
            max: 1,
            min: 0,
            boundaryGap: [0.2, 0.2],
            axisTick: {
              //y轴刻度线
              show: false
            },
            axisLine: {
              //y轴
              show: false
            },
            axisLabel: {
              textStyle: {
                color: 'rgba(255,255,255,.2)'
                // opacity: 0.1,
              }
            },
            splitLine: {
              //决定是否显示坐标中网格
              show: true,
              lineStyle: {
                color: ['#fff'],
                opacity: 0.2
              }
            }
          }
        ],
        color: ['#2E8CFF', '#38EB70'],
        grid: {
          left: '5%',
          right: '1%',
          top: '25%',
          bottom: '15%'
          // containLabel: true
        },
        series: [
          {
            animationDuration: 2500,
            barWidth: '20%',
            name: '巡察',
            type: 'bar',
            data: xunArr
          },
          {
            barWidth: '20%',
            name: '警示',
            type: 'bar',
            data: jingArr
          }
        ],
        animationEasing: 'cubicOut'
      }
      publicNumChart.setOption(option)
      setInterval(function () {
        publicNumChart.clear()
        publicNumChart.setOption(option)
      }, 60000)
    },
    test8: function () {
      var resArr = [
        { name: '测试11', value: 30 },
        { name: '测试22', value: 50 },
        { name: '测试33', value: 40 },
        { name: '测试44', value: 35 },
        { name: '测试55', value: 36 },
        { name: '测试66', value: 80 }
      ]
      var nameArr = []
      var caiArr = []
      var cunArr = []
      var danArr = []
      var junArr = []
      var zhenArr = []
      for (var i = 0; i < resArr.length; i++) {
        nameArr.push(resArr[i].name)
        caiArr.push(resArr[i].value)
        cunArr.push(resArr[i].value)
        danArr.push(resArr[i].value)
        junArr.push(resArr[i].value)
        zhenArr.push(resArr[i].value)
      }
      var yearsNumChart = echarts.init(document.getElementById('yearsNumId'))
      var spNum = 5,
        _max = 100
      var y_data = nameArr.reverse()
      var _datamax = [
        100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100
      ],
        _data1 = caiArr.reverse(),
        _data2 = cunArr.reverse(),
        _data3 = danArr.reverse(),
        _data4 = junArr.reverse(),
        _data5 = zhenArr.reverse()
      var fomatter_fn = function (v) {
        return ((v.value / _max) * 100).toFixed(0)
      }
      var _label = {
        normal: {
          show: true,
          position: 'inside',
          formatter: fomatter_fn,
          textStyle: {
            color: '#fff',
            fontSize: 8
          }
        }
      }
      var option = {
        grid: {
          containLabel: true,
          left: 0,
          top: 0,
          right: 0,
          bottom: 0
        },
        tooltip: {
          show: true,
          backgroundColor: '#fff',
          borderColor: '#ddd',
          borderWidth: 1,
          textStyle: {
            color: '#3c3c3c',
            fontSize: 16
          },
          extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)'
        },
        xAxis: {
          splitNumber: spNum,
          interval: _max / spNum,
          max: _max,
          axisLabel: {
            show: false,
            formatter: function (v) {
              var _v = ((v / _max) * 100).toFixed(0)
              return _v == 0 ? _v : _v + '%'
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: [
          {
            data: y_data,
            axisLabel: {
              fontSize: 8,
              color: 'rgba(255,255,255,.7)'
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          {
            show: false,
            data: y_data,
            axisLine: {
              show: false
            }
          }
        ],
        series: [
          {
            type: 'bar',
            name: '财务',
            stack: '2',
            label: _label,
            legendHoverLink: false,
            barWidth: 7,
            itemStyle: {
              normal: {
                color: '#FD9133'
              },
              emphasis: {
                color: '#FD9133'
              }
            },
            data: _data1
          },
          {
            type: 'bar',
            name: '村务',
            stack: '2',
            legendHoverLink: false,
            barWidth: 20,
            label: _label,
            itemStyle: {
              normal: {
                color: '#2E8CFF'
              },
              emphasis: {
                color: '#2E8CFF'
              }
            },
            data: _data2
          },
          {
            type: 'bar',
            stack: '2',
            name: '党务',
            legendHoverLink: false,
            barWidth: 20,
            label: _label,
            itemStyle: {
              normal: {
                color: '#37D2D4'
              },
              emphasis: {
                color: '#37D2D4'
              }
            },
            data: _data3
          },
          {
            type: 'bar',
            stack: '2',
            name: '居务',
            legendHoverLink: false,
            barWidth: 20,
            label: _label,
            itemStyle: {
              normal: {
                color: '#19CA88'
              },
              emphasis: {
                color: '#19CA88'
              }
            },
            data: _data4
          },
          {
            type: 'bar',
            stack: '2',
            name: '政务',
            legendHoverLink: false,
            barWidth: 20,
            label: _label,
            itemStyle: {
              normal: {
                color: '#0EFCFF'
              },
              emphasis: {
                color: '#0EFCFF'
              }
            },
            data: _data5
          }
        ]
      }
      yearsNumChart.setOption(option)
      setInterval(function () {
        yearsNumChart.clear()
        yearsNumChart.setOption(option)
      }, 120000)
    },
  },
  mounted() {
    console.log('token：', localStorage.getItem('token')); //读取缓存
    // if (localStorage.getItem('token') == null) {
    //   this.$router.replace('/');
    // }
    this.test1()
    this.test2()
    this.test3()
    this.test4()
    this.test5()
    this.test6()
    this.test7()
    this.test8()
  }
}
</script>
<style scoped>
.main_top_left_top_con {
  width: 100%;
  height: 100%;
}

.b1 {
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

.b1:active {
  transform: scale(1.5);
  /* 点击时放大1.1倍 */
}

.b1:hover {
  background-color: rgb(0, 26, 255);
  color: white;
}

.rightTitle {
  position: fixed;
  right: 0;
  height: 100%;
  width: 152px;
  background-color: rgb(173, 173, 173);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.a1 {
  display: flex;
  width: 100%;
}

#publicityId,
#publicityId1 {
  background-color: black;
  /* margin-left: 100px; */
  width: 30%;
  padding: 20px;
}
</style>